<template>
  <view class="safe-area-container">
    <view class="container">
      <!-- 固定的顶部区域 -->
      <view class="fixed-header">
        <!-- 顶部安全区域 -->
        <view class="safe-area"></view>

        <!-- 顶部操作区 -->
        <view class="header">
          <image class="qr-code" src="../../static/二维码.png" mode="aspectFit"></image>
          <text class="edit-btn">编辑</text>
        </view>
      </view>

      <scroll-view scroll-y class="scroll-container">
        <view class="content">
          <!-- 占位，防止内容被顶部遮挡 -->
          <view class="header-placeholder"></view>

          <!-- 个人信息区域 -->
          <view class="profile-section">
            <image class="avatar" src="../../static/avatar.png" mode="aspectFill"></image>
            <text class="name">{{ userName }}</text>
            <text class="phone">欢迎回家，尊敬的{{ userName }}</text>
          </view>

          <!-- 设置列表 -->
          <view class="settings-list">
            <view class="settings-group1">
              <view class="setting-item" @tap="changeUserName">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/用户名.png" mode="aspectFit"></image>
                  <text class="setting-text">更换名字</text>
                </view>
                <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
              </view>
            </view>

            <view class="settings-group">
              <view class="setting-item">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/通知设置.png" mode="aspectFit"></image>
                  <text class="setting-text">通知设置</text>
                </view>
                <view class="before-arrow">
                  <text>{{ notificationEnabled ? '开启' : '关闭' }}</text>
                  <switch
                      :checked="notificationEnabled"
                      @change="toggleNotification"
                      color="#4C6FFF"
                      style="transform: scale(0.8);"
                  />
                </view>
              </view>
              <view class="setting-item" @tap="handleCardClick({type: '电量使用'}, $event)">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/用电量情况.png" mode="aspectFit"></image>
                  <text class="setting-text">用电量情况</text>
                </view>
                <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
              </view>
              <view class="setting-item" @tap="goToFurniture">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/家居分类情况.png" mode="aspectFit"></image>
                  <text class="setting-text">家居分类情况</text>
                </view>
                <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
              </view>
              <view class="setting-item">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/控制中心.png" mode="aspectFit"></image>
                  <text class="setting-text">控制中心</text>
                </view>
                <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
              </view>
            </view>

            <view class="settings-group3">
              <view class="setting-item" @tap="openThresholdSetting('温度')">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/温度.png" mode="aspectFit"></image>
                  <text class="setting-text">温度</text>
                </view>
                <view class="threshold-value">
                  <text>{{getThresholdText('温度')}}</text>
                  <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
                </view>
              </view>

              <view class="setting-item" @tap="openThresholdSetting('湿度')">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/湿度.png" mode="aspectFit"></image>
                  <text class="setting-text">湿度</text>
                </view>
                <view class="threshold-value">
                  <text>{{getThresholdText('湿度')}}</text>
                  <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
                </view>
              </view>

              <view class="setting-item" @tap="openThresholdSetting('空气质量')">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/空气质量.png" mode="aspectFit"></image>
                  <text class="setting-text">空气质量</text>
                </view>
                <view class="threshold-value">
                  <text>{{getThresholdText('空气质量')}}</text>
                  <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
                </view>
              </view>

              <view class="setting-item" @tap="openThresholdSetting('烟雾浓度')">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/烟雾浓度.png" mode="aspectFit"></image>
                  <text class="setting-text">烟雾浓度</text>
                </view>
                <view class="threshold-value">
                  <text>{{getThresholdText('烟雾浓度')}}</text>
                  <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
                </view>
              </view>

              <view class="setting-item" @tap="openThresholdSetting('光照强度')">
                <view class="setting-left">
                  <image class="setting-icon" src="../../static/光照强度.png" mode="aspectFit"></image>
                  <text class="setting-text">光照强度</text>
                </view>
                <view class="threshold-value">
                  <text>{{getThresholdText('光照强度')}}</text>
                  <image class="arrow" src="../../static/arrow.png" mode="aspectFit"></image>
                </view>
              </view>
            </view>

          </view>
        </view>
      </scroll-view>

      <!-- 底部导航栏 -->
      <view class="tab-bar">
        <view class="tab-item" @tap="switchTab('home')" :class="{ active: currentTab === 'home' }" data-tab="home">
          <image
              class="tab-icon"
              :src="getTabIcon('home')"
              mode="aspectFit"
          />
          <text class="tab-text">首页</text>
        </view>
        <view class="tab-item" @tap="switchTab('notify')" :class="{ active: currentTab === 'notify' }" data-tab="notify">
          <image class="tab-icon" :src="getTabIcon('notify')" mode="aspectFit"></image>
          <text class="tab-text">通知</text>
        </view>
        <view class="tab-item tab-item-center">
          <view class="center-button"
                :class="{ active: isCenterActive }"
                @tap="handleCenterClick"
          >
            <image
                :src="isCenterActive ? '../../static/deepseek-active.png' : '../../static/deepseek.png'"
                mode="aspectFit"
            ></image>
          </view>
        </view>
        <view class="tab-item" @tap="switchTab('control')" :class="{ active: currentTab === 'control' }" data-tab="control">
          <image class="tab-icon" :src="getTabIcon('control')" mode="aspectFit"></image>
          <text class="tab-text">控制</text>
        </view>
        <view class="tab-item" @tap="switchTab('setting')" :class="{ active: currentTab === 'setting' }" data-tab="setting">
          <image class="tab-icon" :src="getTabIcon('setting')" mode="aspectFit"></image>
          <text class="tab-text">设置</text>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  import setting from "./setting";
  export default setting
</script>

<style>
  @import "setting.css";
</style> 